<template>
  <div class="loginC flexAlCenter">
    <div class="loginLeft">
      <img src="@/assets/img/login/lgbk.png" alt=""/>
    </div>
    <div class="loginRight">
      <div class="loginRightTitle">欢迎<span>登录/注册</span></div>
      <div class="loginTypeContent">
        <div class="loginTypeContentList">
          <div class="loginTypeContentListT flexAlCenter">
            <img src="@/assets/img/login/loginIcon1.png" alt=""/>
            用户名
          </div>
          <div class="loginTypeContentListB flexAlCenter">
            <el-input type="text" v-model="phone" :placeholder="loginType == 1 ? '请输入账号' : '请输入手机号'"/>
          </div>
        </div>
        <div class="loginTypeContentList" v-if="loginType == 1">
          <div class="loginTypeContentListT flexAlCenter">
            <img src="@/assets/img/login/loginIcon2.png" alt=""/>
            密码
          </div>
          <div class="loginTypeContentListB flexAlCenter">
            <el-input type="password" v-model="password" placeholder="请输入密码"/>
          </div>
        </div>
        <div class="loginTypeContentList" v-if="loginType == 2">
          <div class="loginTypeContentListT flexAlCenter">
            <img src="@/assets/img/login/loginIcon3.png" alt=""/>
            验证码
          </div>
          <div class="loginTypeContentListB flexAlCenter">
            <el-input type="text" v-model="code" placeholder="请输入验证码"/>
            <div class="loginTypecode" @click="sendSms">
              {{ codeText || "获取验证码" }}
            </div>
          </div>
        </div>
      </div>
      <el-button id="loginButton" @click="login" class="loginBtn" :loading="loading">登录 / 注册</el-button>
      <div class="loginTypeContentCheck">
        <el-checkbox v-model="checked" fill="#FE8D22"></el-checkbox>
        已阅读并同意<span @click="openFile('yh')">《百工人服用户协议》</span>及
        <span @click="openFile('ys')">《隐私政策》</span>
      </div>
    </div>
    <div class="records">Copyright©湖南建匠科技有限公司 2023-2026</div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";

let loginType = ref(1);

let codeText = ref('');
let code = ref('');
const sendSms = () => {
}

const openFile = (type: string) => {
  console.log(type);
}

let phone = ref("");
let password = ref('');
let loading = ref(false);
let checked = ref(false);
const login = () => {

}
</script>

<style scoped lang="scss">
.loginC {
  height: 100%;
}

.loginLeft {
  @include __mixin.flex();
  flex: 1;
  height: 100%;
}

.loginLeft img {
  height: 100%;
  width: 100%;
}
.loginRight {
  @include __mixin.flex(true, true, column);
  height: 100%;
  background: #fff;
  padding: 0 180px;
  width: 750px;
}

.loginRightTitle {
  width: 100%;
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 70px;
}

.loginRightTitle span {
  color: var(--primary-color);
}

.loginRightTab {
  padding-bottom: 60px;
}

.loginRightTabList {
  padding-right: 15px;
  cursor: pointer;
  position: relative;
  font-size: 18px;
}

.loginRightTabList.loginTabActive {
  color: #ED6C00;
}
.loginTypeContent{
  width: 100%;
}
.loginTypeContentListT {
  color: #666666;
  font-size: 16px;
  margin-bottom: 20px;
}

.loginTypeContentListT img {
  width: 23px;
  margin-right: 5px;
}

.loginTypeContentList {
  margin-top: 20px;
}

.loginC .loginBtn {
  border-radius: 4px;
  width: 100%;
  font-size: 18px;
  margin-top: 50px;
  background: #FE8D22;
  border-color: #FE8D22;
  height: 50px;
  color: #fff;
}

.loginC .el-button:focus,
.loginC .el-button:hover {
  background: var(--warring-color);
  border-color: var(--warring-color);
  color: #fff;
}


.loginTypeContentListB {
  position: relative;
}

.loginTypecode {
  position: absolute;
  right: 20px;
  cursor: pointer;
  color: #ED6C00;
}
.records {
  position: fixed;
  bottom: 25px;
  left: 50%;
  margin-left: -160px;
}
</style>
